<%@page import="org.ifilm.model.Project"%>
<%@page import="java.util.List"%>
<%@page import="org.ifilm.controller.ProjectController"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@ page import="org.ifilm.model.User,org.ifilm.util.GeneralConstants"%>
<%
	if (request.getAttribute("projects") == null) {
		if(request.getAttribute("userId")!=null)
			response.sendRedirect("/film/project/listUserProjectsForProfile.do?userId="+request.getAttribute("userId")+"&page=1&max=2");
		if(request.getParameter("userId")!=null){
			response.sendRedirect("/film/project/listUserProjectsForProfile.do?userId="+request.getParameter("userId")+"&page=1&max=2");
		}
	}
%>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>${profileUser.name} ${profileUser.surname}'s Profile</title>
		
		<link rel="icon" type="image/png" href="/film/img/favicon.ico">
		<link href="/film/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
		<script src="/film/js/jquery.js"></script>
		<script src="/film/bootstrap/js/bootstrap.min.js"></script>
		
		<style>
			body {
				padding-top: 60px;
				/* 60px to make the container go all the way to the bottom of the topbar */
			}
			
			.star-box-giga-star {
				background-position: -180px -71px;
				width: 66px;
				height: 66px;
				line-height: 66px;
				display: inline-block;
				text-align: center;
				vertical-align: middle;
				font-size: 15px;
				font-weight: bold;
				color: black;
				font-family: tahoma;
				float: left;
				padding-right: 5px;
			}
			
			.titlePageSprite {
				background-image: url(/film/img/titlePageSprite.png);
				display: inline-block;
				margin-left: 60px;
				vertical-align: middle;
			}
			
			.rating {
				width: 200px;
				unicode-bidi: bidi-override;
				direction: rtl;
				text-align: center;
			}
			
			.rating>span {
				display: inline-block;
				position: relative;
				width: 1.1em;
			}
			
			.rating>span:hover,.rating>span:hover ~ span {
				color: transparent;
			}
			
			.rating>span:hover:before,.rating>span:hover ~ span:before {
				content: "\2605";
				position: absolute;
				left: 0;
				color: gold;
			}
		</style>
	</head>
	<body>
		<jsp:include page="navigationBar.jsp"/>	
		<div class="container">
			<div class="content-container">
				
				<c:if test="${user.id == profileUser.id}">
					<a class="pull-right" href="/film/editUser.jsp">Edit Profile</a>
				</c:if>
				<c:if test="${user.id != profileUser.id}">
					<button class="btn pull-right"><a href="#myModal" style="color:#333;" class="pull-right" data-toggle="modal" href="#">Send Message</a></button>
					
					<c:forEach var="fu" items="${user.followingUsers}">
						<c:if test="${fu.id == profileUser.id && following != true}">
							<c:set var="following" value="true"></c:set>
							<button id="following" class="btn pull-right"><i class="icon-ok"></i> Following</button>
							<button id="follow" style="display:none" class="btn pull-right">Follow</button>
						</c:if>
					</c:forEach>
					
					<c:if test="${following != true}">
						<button id="following" style="display:none" class="btn pull-right"><i class="icon-ok"></i> Following</button>
						<button id="follow" class="btn pull-right">Follow</button>
					</c:if>
 
					<!-- Modal -->
					<div id="myModal" style="width:700px;" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					  	<div class="modal-header">
					    	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					    	<h3 id="myModalLabel">Send Message</h3>
					 	</div>
					  	<div class="modal-body">
					  		<table>
					  			<tr>
						  			<td>Subject : </td>
						  			<td><input type="text" id="subject"/></td>
						  		</tr>
						  		<tr>
							    	<td>Message : </td>
						    		<td><textarea id="messageText" rows="6" style="width: 500px;"></textarea></td>
					    		</tr>
				    		</table>
					  	</div>
					  	<div class="modal-footer">
					    	<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
					    	<button onclick="sendMessage();" class="btn btn-primary">Send</button>
					  	</div>
					</div>
				</c:if>
				
				<table class="table" width=100% border="0">
					<tr>
						<td rowspan="4" width=40%>
							<c:if test="${profileUser.thumbnailUrl != null}">
								<img class="media-object" style="width:200px;height:200px" src="/film/photo/getPhoto.do?fileName=${profileUser.thumbnailUrl}">
							</c:if> 
							
							<c:if test="${profileUser.thumbnailUrl == null}">
								<img class="media-object" style="width:200px;height:200px" src="/film/img/noavatar.png">
							</c:if>
							
							<div class="rating">
								<c:forEach var="i" begin="${rate + 1}" end="5">
									<span>☆</span>
								</c:forEach>
								<c:forEach var="i" begin="1" end="${rate}">
									<span style="color: red;">☆</span>
								</c:forEach>
							</div>
	
							<div class="titlePageSprite star-box-giga-star" id="userRateStar">${profileUser.averageRate}</div>
							<br/>	<br/>	<br/>
							<a><h5>About me</h5></a>${profileUser.about}
						
						</td>
						
						<td colspan="3">
							<h1>${profileUser.name} ${profileUser.surname}</h1>
						</td>
					</tr>
					<tr>
						<td width=33%>
							<h6><a>Gender</a>
							<br/>${profileUser.gender}</h6>
						</td>
						<td width=33% >							
								<h6><a>Birth date</a>
								<br/>${profileUser.birthdate}</h6>						
						</td>
						<td width=33%>
							<c:if test="${profileUser.phone != null}">
								<h6><a>Phone</a>
								<br/>${profileUser.phone}</h6>
							</c:if>
						</td>						
					</tr>				
					<tr>
						<td width=33%>
							<h6><a>Professions</a>
							<br/><c:forEach var="type" items="${profileUser.userType}">
								<c:if test="${type != null}">
									  ${type}<br/>
								</c:if>													
							</c:forEach>
							</h6>
						</td>
												
						<td width=33% >
							<div id="userDetails">
								<a>
									<h6>User Details</h6>
								</a>
								<ul>
									<!-- TODO -->
									<c:if test="${profileUser.height != null}">
									<li><h6>Height: ${profileUser.height} cm </h6></li>
									</c:if>
									<c:if test="${profileUser.weight != null}">
									<li><h6>Weight: ${profileUser.weight} kg</h6></li>
									</c:if>
									<c:if test="${profileUser.hairColor != null}">
									<li><h6>Hair Color: ${profileUser.hairColor} </h6></li>
									</c:if>
									<c:if test="${profileUser.eyeColor != null}">
									<li><h6>Eye Color: ${profileUser.eyeColor} </h6></li>
									</c:if>
									<c:if test="${profileUser.age != null}">
									<li><h6>Age: ${profileUser.age}</h6></li>
									</c:if>
								</ul>
							</div>
						</td>
						<td> </td>
					</tr>									
				</table>
				<hr/>				
					
					<h4>${profileUser.name} ${profileUser.surname} 's  Projects</h4>
				
				<c:forEach var="p" items="${projects}">
				 	<div class="media">
				 		<a class="pull-left" href="/film/project/getProject.do?pid=${p.id}">
				 		</a>				 		
				 		<div class="media-body">
				 			<a href="/film/project/getProject.do?pid=${p.id}"><h5>${p.projectName}</h5></a>
				 			<c:if test="${p.description != null}">Description: ${p.description} </c:if>
				 		<hr/>				 			
			 	</c:forEach>
			 	<div class="pagination pagination-centered">
			 		<ul>
			 			<c:if test="${page == null or page == 1}">
				 			<li><a page="1" href="#">Prev</a></li>
				 		</c:if>
				 		
				 		<c:if test="${page != null and page != 1}">
				 			<li><a page="${page - 1}" href="#">Prev</a></li>
				 		</c:if>
				 		
				 		<c:if test="${page == null or page == 1 or page == 2}">
				 			<li><a page="1" href="#">1</a></li>
							<li><a page="2" href="#">2</a></li>
							<li><a page="3" href="#">3</a></li>
							<li><a page="4" href="#">4</a></li>
							<li><a page="5" href="#">5</a></li>
				 		</c:if>
				 		
				 		<c:if test="${page != null and page != 1 and page != 2}">
				 			<li><a page="${page - 2}" href="#">${page - 2}</a></li>
							<li><a page="${page - 1}" href="#">${page - 1}</a></li>
							<li><a page="${page}" href="#">${page}</a></li>
							<li><a page="${page + 1}" href="#">${page + 1}</a></li>
							<li><a page="${page + 2}" href="#">${page + 2}</a></li>
				 		</c:if>
						
						<c:if test="${page == null}">
				 			<li><a page="2" href="#">Prev</a></li>
				 		</c:if>
				 		
				 		<c:if test="${page != null}">
				 			<li><a page="${page + 1}" href="#">Next</a></li>
				 		</c:if>
					</ul>
				</div>
			</div>
		</div>							
	</body>
	
	<script type="text/javascript">
		$('#myTab a:last').tab('show');	
		  
		$(".rating span").click(function(e) {
			$(this).css({
				"color" : "red"
			});
			var siblingsBefore = $(this).nextAll();
			siblingsBefore.css({
				"color" : "red"
			});

			var siblingsAfter = $(this).prevAll();
			siblingsAfter.css({
				"color" : ""
			});

			var rate = siblingsBefore.length + 1;

			$.ajax("/film/user/rate.do?userId=" + <%=request.getParameter("userId")%> + "&rate=" + rate).done(function(data) {
				if (data && data.rate) {
					$("#userRateStar").html(data.rate);
				}
			});
		});
		
		$("#follow").click(function() {
			var thisButton = $(this);
			$.ajax("/film/user/follow.do?followingId=" + <%=request.getParameter("userId")%>).done(function(data) {
				thisButton.hide();
				$("#following").show();
			});
		});
		
		$("#following").click(function() {
			var thisButton = $(this);
			$.ajax("/film/user/unfollow.do?followingId=" + <%=request.getParameter("userId")%>).done(function(data) {
				thisButton.hide();
				$("#follow").show();
			});
		});
		
		function sendMessage() {
			var messageText = $("#messageText").val();
			$.ajax("/film/message/createMessage.do?receiverId=" + <%=request.getParameter("userId")%> + 
					"&message=" + messageText + "&subject=" + $("#subject").val()).done(function(data) {
				if (data.status == "success") {
					$('#myModal').modal('hide');
					$("#messageText").val("");
				}
			});
		};
	</script>
	<script type="text/javascript">
	    $(".pagination a").click(function() {
	    	var page = $(this).attr("page");
	    	window.location.href = ("/film/project/listUserProjectsForProfile.do?userId=" + ${profileUser.id} + "&page=" + page  + "&max=" + <%=request.getParameter("max")%>);
	    });
	    
	    $("#userProjects").click(function() {
	    	if ($(this).attr("page") == undefined) {
	    		var page = 1;
	    	} else {
	    		var page = $(this).attr("page");
	    	};
	    	
	    	window.location.href = ("/film/project/listUserProjectsForProfile.do?userId=" + ${profileUser.id} + "&page=" + page  + "&max=" + <%=request.getParameter("max")%>);
	    });
	    
	    $(".projectTitle").click(function() {
	    	var pid = $(this).attr("pid");
	    	window.location.href = "/film/project/getProject.do?pid=" + pid;
	    });
	    
		$(".applyButton").click(function() {		
			var thisButton = $(this);
			$.ajax("/film/notice/applyJob.do?postingId=" + $(this).attr("postingId")).done(function(data) {
				thisButton.attr("disabled","disabled");
				thisButton.html("Applied...");
				console.log("Your application is successful.");
			});
		});
	</script>
	
	<script src="/film/js/commonScripts.js"></script>
</html>
